<template>
	<!-- :style="'padding-top:' + navBarHeight +'px' " -->
	<view class="content">
		<scroll-view class="nav" scroll-x="true" scroll-left="0">
			<text
				v-for="(v, i) in categoryList" :key="i"
				class="nav-item"
				:class=" v.name === selectCate ? 'act' : ''"
				@click="selectCate = v.name"
			>{{ v.name }}</text>
		</scroll-view>
		<view>
			<ProductList :list="productListGroupByCategory[selectCate] || []"/>
		</view>
	</view>
</template>

<script>
import http from '@/utils/http';
import ProductList from '@/components/ProductList/index.vue'
export default {
	components: {
		ProductList,
	},
	data() {
		return {
			title: 'Hello',
			navBarHeight: '0',
			value: null,
			categoryList: [],
			selectCate: '',
			productListGroupByCategory: {},
		}
	},
	onLoad( ){
		this.init();
		let res = wx.getSystemInfoSync()
		this.navBarHeight = res.statusBarHeight + 44;
		this.getList();
	},
	onShow() {

		this.init();

	},
	methods: {
		/**
		 * 获取列表
		 */
		getList() {
			this.$http.get('/indexPage/getIndexPageVo', {}).then(res => {
				this.categoryList = res.data.categoryList;
				console.log(res.data, 31231);
				res.data.productListGroupByCategory.forEach(v => {
					this.productListGroupByCategory[v.categoryName] = [...v.productVoList];
				});

				this.selectCate =this.categoryList[0].name;
				console.log(this.productListGroupByCategory[this.selectCate][0])
			}).catch(e => {
				console.log(e)
			})
		},
		/**
		 * 初始化校验
		 */
		init() {
			console.log(this.$store.state?.userInfo?.unionId)
			if (!this.$store.state?.userInfo?.unionId) {
				uni.navigateTo({
					url: '/pages/common/index'
				});
			}
		}
	}
}
</script>

<style lang="stylus">
	.content
		display: flex;
		flex-direction: column;
		min-height 100vh
	.text-area
		display: flex;
		justify-content: center;

	.title
		font-size: 36rpx;
		color: #8f8f94;
	.nav
		white-space: nowrap;
		padding 0 30rpx 24rpx

		.nav-item
			position relative
			overflow visiable
			height 44rpx
			display inline-block
			margin-right 40rpx
			font-size 28rpx
			&.act
				&::after
					content ' '
					height 6rpx
					width 50%
					background #ff0036
					position absolute
					bottom 0
					left 50%
					margin-left -25%
					border-radius 3rpx
</style>
